<script class="zone-element-tpl" type="text/html">
    <div class="zone" data-zone="{{ uid }}" style="
        top:{{ y_percent }}%;
        left:{{ x_percent }}%;
        width:{{ width_percent }}%;
        height:{{ height_percent }}%;">
        <p>{{{ title }}}</p>
        <p class="sr">{{{ description }}}</p>
    </div>
</script>

<script class="zone-input-tpl" type="text/html">
    <fieldset class="zone-row" data-uid="{{zone.uid}}">
        <button type="button" class="btn remove-zone hidden" title="{{i18n 'Remove zone'}}">
            <span class="icon remove" aria-hidden="true"></span>
        </button>
        <label>
            <span>{{i18n "Title"}}</span>
            <input type="text"
                   class="zone-title"
                   value="{{ zone.title }}"
                   required />
        </label>
        <label>
            <span>{{i18n "Description"}}</span>
            <input type="text"
                   class="zone-description"
                   value="{{ zone.description }}"
                   aria-describedby="zone-description-description-{{zone.uid}}-{{id_suffix}}"
                   required />
            <div id="zone-description-description-{{zone.uid}}-{{id_suffix}}" class="form-help">
                {{i18n "Describe this zone to non-visual users."}}
            </div>
        </label>
        <div class="layout">
            <label>
                <span>{{i18n "width"}}</span>
                <input type="text"
                       class="zone-size zone-width"
                       value="{{ zone.width }}" />
            </label>
            <label>
                <span>{{i18n "height"}}</span>
                <input type="text"
                       class="zone-size zone-height"
                       value="{{ zone.height }}" />
            </label>
            <br />
            <label>
                <span>x</span>
                <input type="text"
                       class="zone-coord zone-x"
                       value="{{ zone.x }}" />
            </label>
            <label>
                <span>y</span>
                <input type="text"
                       class="zone-coord zone-y"
                       value="{{ zone.y }}" />
            </label>
        </div>
        <div class="alignment">
            <label>
                <span>{{i18n "Alignment"}}</span>
                <select class="zone-align-select"
                        aria-describedby="zone-align-description-{{zone.uid}}-{{id_suffix}}">
                    <option value="left"
                        {{#ifeq zone.align "left"}}selected{{/ifeq}}>
                        {{i18n "left"}}
                    </option>
                    <option value="center"
                        {{#ifeq zone.align "center"}}selected{{/ifeq}}>
                        {{i18n "center"}}
                    </option>
                    <option value="right"
                        {{#ifeq zone.align "right"}}selected{{/ifeq}}>
                        {{i18n "right"}}
                    </option>
                </select>
            </label>
            <div id="zone-align-description-{{zone.uid}}-{{id_suffix}}" class="form-help">
                {{i18n "Align dropped items to the left, center, or right."}}
            </div>
        </div>
    </fieldset>
</script>

<script class="zone-checkbox-tpl" type="text/html">
    <div class="zone-checkbox-row">
        <label class="checkbox-label">
            <input type="checkbox"
                   value="{{ zoneUid }}"
                   class="zone-checkbox"
                   {{ checked }} />
            {{ title }}
        </label>
    </div>
</script>

<script class="item-input-tpl" type="text/html">
    <fieldset class="item">
        <button type="button" class="btn remove-item hidden" title="{{i18n 'Remove item'}}">
            <span class="icon remove" aria-hidden="true"></span>
        </button>
        <div class="row">
            <label class="h4">
                {{i18n "Text"}}
                <input type="text"
                       aria-describedby="item-text-description-{{index}}-{{id_suffix}}"
                       class="item-text"
                       value="{{ displayName }}" />
            </label>
            <div id="item-text-description-{{index}}-{{id_suffix}}" class="form-help">
                {{i18n "Use text that is clear and descriptive of the item to be placed."}}
            </div>
        </div>
        <div class="row">
            <fieldset>
                <legend class="h4">
                    {{ i18n "Zones" }}
                </legend>
                {{ checkboxes }}
            </fieldset>
        </div>
        <div class="row">
            <label class="h4">
                {{i18n "Image URL (alternative to the text)"}}
                <input type="text"
                       aria-describedby="item-image-url-description-{{index}}-{{id_suffix}}"
                       class="item-image-url"
                       value="{{ imageURL }}" />
            </label>
            <div id="item-image-url-description-{{index}}-{{id_suffix}}" class="form-help">
                {{i18n "For example, 'http://example.com/image.png' or '/static/image.png'."}}
            </div>
        </div>
        <div class="row">
            <label class="h4">
                <span>{{i18n "Image description (should provide sufficient information to place the item even if the image did not load)"}}</span>
                <textarea {{#if imageURL}}required{{/if}} class="item-image-description">{{ imageDescription }}</textarea>
            </label>
        </div>
        <div class="row">
            <label class="h4">
                <span>{{i18n "Success feedback"}}</span>
                <textarea class="success-feedback">{{ feedback.correct }}</textarea>
            </label>
        </div>
        <div class="row">
            <label class="h4">
                <span>{{i18n "Error feedback"}}</span>
                <textarea class="error-feedback">{{ feedback.incorrect }}</textarea>
            </label>
        </div>
        <div class="row advanced-link">
            <button type="button">{{i18n "Show advanced settings" }}</button>
        </div>
        <div class="row advanced">
            <label class="h4">
                <span>{{i18n "Preferred width"}}</span>
                <input type="number"
                       class="item-width"
                       value="{{ singleDecimalFloat widthPercent }}"
                       aria-describedby="item-width-description-{{index}}-{{id_suffix}}"
                       step="0.1"
                       min="1"
                       max="99" />%
            </label>
            <div id="item-width-description-{{index}}-{{id_suffix}}" class="form-help">
                {{i18n "Specify preferred width as percentage of the background image width. Leave blank for automatic width."}}
            </div>
        </div>
    </fieldset>
</script>

<script class="autozone-tpl" type="text/html">
    <svg xmlns="http://www.w3.org/2000/svg" width="{{width}}" height="{{height}}">
        <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
        {{#each zones}}
            <rect x="{{x}}"
                  y="{{y}}"
                  width="{{width}}"
                  height="{{height}}"
                  fill="#f7f7f7"
                  rx="10"
                  ry="10"
                  stroke="#d6d6d6"
                  stroke-width="2"
                  stroke-dasharray="3,3" />
        {{/each}}
    </svg>
</script>
